{extend name='public/base' /}

{block name='head'}
<link rel="stylesheet" type="text/css" href="__MODULE_CSS__/index.css">
<style type="text/css">

</style>
{/block}

{block name='body'}
<div class="container">
	<div class="head-con">
	</div>

	<div class="line">
		<img src="__MODULE_IMG__/upper.png" alt="" class="upper-char">
		<div class="win-lose">
			<img src="__MODULE_IMG__/win.png" v-if="win_side == 1" alt="">
			<img src="__MODULE_IMG__/lose.png" v-if="win_side == 2" alt="">
		</div>
		<img src="__MODULE_IMG__/win_btn.png" alt="" @click="onUpWin" class="win-btn">
	</div>

	<div class="body-con">
		<div class="img-con" v-for="item in items" v-if="item <= 5">
			<img :src="item.headimgurl" alt="">
			<span>{{item.nickname}}</span>
		</div>
	</div>

	<div class="line">
		<img src="__MODULE_IMG__/lower.png" alt="" class="lower-char">
		<div class="win-lose">
			<img src="__MODULE_IMG__/win.png" v-if="win_side == 2" alt="">
			<img src="__MODULE_IMG__/lose.png"  v-if="win_side == 1" alt="">
		</div>
		<img src="__MODULE_IMG__/win_btn.png" alt="" @click="onDownWin" class="win-btn">
	</div>

	<div class="body-con">
		<div class="img-con" v-for="item in items" v-if="item > 5">
			<img :src="item.headimgurl" alt="">
			<span>{{item.nickname}}</span>
		</div>
	</div>

	<div class="cash-con">
		<div>防跑路金 <span>{{cash}}</span> 元</div>
	</div>

	<div class="btn-con">
		<a href="" @click.prevent="onJoin">
			<img src="__MODULE_IMG__/join_btn.jpg" alt="">
		</a>
		<a href="{:url('index/create')}">
			<img src="__MODULE_IMG__/create_btn.jpg" alt="">
		</a>
	</div>
</div>

{/block}

{block name='script'}
<script>
	var loading = weui.loading('loading');
	window.onload = function(){
		var vm = new Vue({
			el: '.container',

			data: {
				cash: 0,
				items: [1,2,3,4,5,6,7,8,9,10],
				win_side: 0
			},

			created: function () {
				loading.hide()
			},

			methods: {
				onUpWin: function(e){
					this.win_side = 1;
				},

				onDownWin: function(e){
					this.win_side = 2;
				},

				onJoin: function(e){
					this.$http.get("{:url('index/join')}").then(res => {

					}, res => {

					})
				}
			}
		})
	}
</script>
<script type="text/javascript">
	document.ontouchmove = function(e){
		e.preventDefault();
	}
</script>
{/block}
